<template>
	<view class="page">
		<!-- <view class="top-bg"></view> -->
		<!-- <dawnBar title="订单信息"></dawnBar> -->
		<view class="page-container1">
			<view class="page-index">
				<view class="hd">
					<view class="info">
						<view class="info-hd">付款给</view>
						<view class="info-bd">{{ appConfig.appTitle }}</view>
					</view>
					<view class="info-icon">
						<image class="info-icon-img" :src="appConfig.logoUrl" alt="">
					</view>
					<view class="bg"></view>
				</view>
				<view class="bd">
					<view class="box">
						<view class="box-hd">
							<view class="box-hd-label">费用总额</view>
							<view class="box-hd-value">{{chsOrder.orderInfo.feeSumamt}}元</view>
						</view>
						<view class="box-bd">
							<view class="box-item">
								<view class="box-bd-label">医保基金支付</view>
								<view class="box-bd-value">{{chsOrder.orderInfo.fundPay}}元</view>
							</view>
							<view class="box-item">
								<view class="box-bd-label">个人账户支付</view>
								<view class="box-bd-value">{{chsOrder.orderInfo.psnAcctPay}}元</view>
							</view>
							<view class="box-item">
								<view class="box-bd-label">其他抵扣金额</view>
								<view class="box-bd-value">{{ otherFee }}元</view>
							</view>
						</view>
						<view class="box-ft">
							<view class="box-ft-label">现金支付</view>
							<view class="box-ft-value">{{chsOrder.orderInfo.ownPayAmt}}元</view>
						</view>
						<view class="box-append" @click="handleActionsheet">
							查看明细
						</view>
					</view>
					<view class="bd-append">
						<i class="bd-append-icon"></i>
						<view class="bd-append-text">医保移动支付</view>
					</view>
				</view>
				<view class="ft">
					<view class="pay">
						<view class="pay-label">您还需支付：</view>
						<view class="pay-value">¥ {{chsOrder.orderInfo.ownPayAmt}}</view>
					</view>
					<view class="btn" @click="toOrderPay()">去支付</view>
				</view>
				
				<view class="actionsheet" v-show="actionsheetVisible">
					<view class="actionsheet-mask" @click="handleActionsheet"></view>
					<view class="actionsheet-panel">
						<view class="actionsheet-hd">
							<view class="actionsheet-hd-tt">单据明细</view>
							<i class="actionsheet-icon-close" @click="handleActionsheet"></i>
						</view>
						<view class="actionsheet-bd">
							<view class="actionsheet-box" v-for="item in prescriptionList" :key="item.id">
								<view class="actionsheet-box-hd">{{item.projectName}}</view>
								<view class="actionsheet-box-bd">
									<view class="actionsheet-box-item">
										<view class="actionsheet-box-item-label-wrap">
											<!-- <view class="actionsheet-box-item-label">{{item.projectName}}</view> -->
											<view class="actionsheet-box-item-sublabel"> {{item.price}} * {{item.entriesNum}} {{item.unit || ''}}</view>
										</view>
										<view class="actionsheet-box-item-value em">
											¥ {{item.price * item.entriesNum}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>

			<!-- <view v-if="show">
				<dawnMsg box="popup" :msg="msg"></dawnMsg>
			</view> -->
			
			<tn-popup v-model="show" :maskCloseable="maskCloseable" mode="center" width="90%" :borderRadius="borderRadius">
				<view class="content">
					<tn-list-cell>
						<view class="tn-text-center">
							<text class="dawn-text-lg dawn-color">系统提示</text>
						</view>
					</tn-list-cell>
					<scroll-view scroll-y="true" style="min-height: 15vh;max-height: 50vh;">
						<view class='conters'>
							<view>{{ msg }}</view>
						</view>
					</scroll-view>
					<view
						class="tn-flex tn-flex-row-center tn-flex-col-center tn-width-full tn-padding-top tn-padding-bottom">
						<tn-button @click="toPay()" class="dawn-btn-lg dawn-btn-lg__info">
							<text class="tn-icon-check tn-padding-right-xs"></text>
							<text>关 闭</text>
						</tn-button>
					</view>
				</view>
			</tn-popup>
			
		</view>

		<tn-landscape :show="loading" :closeBtn="false" :mask="true" :maskCloseable="false">
			<image style="width:120px;height: 120rpx;border-radius: 40%;" mode="widthFix" src="../../static/images/icon_chs_loading.gif">
			</image>
			<!-- <view class="app-loading-item">
				<view class="app-loading-outter"></view>
				<view class="app-loading-inner"></view>
			</view> -->
			<view class="tn-margin-top">
				<text class="chs-loading-text">正在处理中，请稍候...</text>
			</view>
		</tn-landscape>

		<!-- loading -->
		<!-- <dawnLoading :show="loading"></dawnLoading> -->

	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as ChsApi from "@/api/hospital/chs.js";
	import * as PayApi from "@/api/hospital/pay.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				borderRadius: 40,
				maskCloseable: false,
				iconSize: 38,
				size: 40,
				loading: false,
				show: false,
				msg: '',
				tabsIndex: 0,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					orderNumber: ''
				},
				status: -1,
				authInfo: {},
				chsOrder: {
					orderInfo: {
						feeSumamt: 0.00,
						fundPay: 0.00,
						psnAcctPay: 0.00,
						ownPayAmt: 0.00,
					}
				},
				otherFee: 0.00,
				bill: {},
				prescriptionList: [],
				actionsheetVisible: false
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				if (options.hasOwnProperty('params')) {
					let params = JSON.parse(options.params);
					this.authInfo = params;
					this.getOrder(params);
				}
			}
		},
		methods: {
			toPay(){
				this.toPayUI(this.queryData.orderNumber);
				this.show = false;
			},
			getOrder: function(page) {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.queryData.patientId = this.patientInfo.patientId || '0';
				this.queryData.patientName = this.patientInfo.name || '0';
				this.queryData.orderNumber = this.authInfo.orderNumber;
				PayApi.orderQuery(this.queryData).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						that.bill = res.data;
						that.prescriptionList = res.data.prices;
						that.authInfo.orderType = res.data.orderType;
						let orderNo = '';
						res.data.items.forEach(function(item) {
							orderNo += item.orderNo + ',';
						});
						if (orderNo != '') {
							orderNo = orderNo.substring(0, orderNo.length - 1);
						}
						that.bill.billNos = orderNo;
						if (that.authInfo.payAuthNo) {
							that.toOrderFee();
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			toOrderFee: function(params) {
				let that = this;
				that.loading = true;
				that.show = false;
				const queryData = new Object();
				queryData.userId = that.bill.userId;
				queryData.openid = that.bill.userId;
				queryData.patientId = that.bill.patientId;
				queryData.patientName = that.bill.patientName;
				queryData.idCardNo = that.bill.cardNo;
				queryData.sfgh = '0';
				queryData.medOrgOrd = that.bill.billNos;
				queryData.payAuthNo = that.authInfo.payAuthNo;
				queryData.uldLatlnt = that.authInfo.uldLatlnt;
				ChsApi.orderFee(queryData).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						that.chsOrder = res.data;
					} else {
						that.show = true;
						that.msg = '获取医保分账数据失败=>' + res.msg;
					}
				}).catch(error => {
					console.table(error);
					that.loading = false;
					that.show = true;
					that.msg = '获取医保分账数据失败=>' + error.message;
				});
			},
			toOrderPay: function() {
				let that = this;
				that.loading = true;
				that.show = false;
				const queryData = new Object();
				queryData.userId = that.bill.userId;
				queryData.openid = that.bill.userId;
				queryData.patientName = that.bill.patientName;

				queryData.orderNumber = this.authInfo.orderNumber;
				queryData.orderType = this.authInfo.orderType;

				queryData.totalFee = this.chsOrder.orderInfo.feeSumamt;
				queryData.cashFee = this.chsOrder.orderInfo.ownPayAmt;
				queryData.psnAcctPay = this.chsOrder.orderInfo.psnAcctPay;
				queryData.fundPay = this.chsOrder.orderInfo.fundPay;
				queryData.payOrdId = this.chsOrder.orderInfo.payOrdId;

				if(this.chsOrder.orderInfo.transNum){
					queryData.medOrgOrd = this.chsOrder.orderInfo.transNum;
				}else{
					queryData.medOrgOrd = this.chsOrder.orderInfo.medOrgOrd;
				}
				queryData.billNos = this.bill.billNos;
				
				queryData.payAuthNo = this.chsOrder.payAuthNo;
				queryData.uldLatlnt = this.chsOrder.uldLatlnt;
				queryData.idNo = this.chsOrder.idNo;
				queryData.username = this.chsOrder.username;
				queryData.patientId = that.chsOrder.BRID;

				ChsApi.orderPay(queryData).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						window.location.href = res.data.payUrl;
					} else {
						that.show = true;
						that.msg = '医保支付下单失败=>' + res.msg;
					}
				}).catch(error => {
					console.table(error);
					that.loading = false;
				});
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>

.app-loading-item {
	position: relative;
	display: inline-block;
	width: 85px;
	height: 85px;
	vertical-align: middle;
	border-radius: 50%;
}

.app-loading-outter {
	position: absolute;
  width: 100%;
  height: 100%;
  border: 10px solid #152d63;
  border-bottom: 0;
  border-left-color: transparent;
  border-radius: 50%;
  animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.app-loading-inner {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 60px;
  height: 60px;
  border: 10px solid #3B71EB;
  border-right: 0;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
</style>